import PartnerContentLink from 'components/PartnerContentLink';
import Callout from 'components/Callout';
import Screenshot from 'components/Screenshot';
import Image from 'next/image';

# Localization management with Crowdin

Once you've set up your app with `next-intl`, you'll have multiple translation bundles that contain your messages (e.g. `en.json`). To streamline the workflow of managing these and to allow other team members to contribute translations, it's a good idea to use a localization management platform.

While `next-intl` works with all localization management platforms that support translating JSON files, `next-intl` recommends <PartnerContentLink name="localization-management-intro" href="https://crowdin.com/teams/engineering">Crowdin</PartnerContentLink> for managing your translations.

## Collaborate with translators

The Crowdin Editor provides an easy-to-use environment for translating messages. Apart from guiding translators through your messages, the workflow is improved with advanced features like machine translation suggestions, glossaries and contextual screenshots.

<figure>
  <div className="max-w-lg">
    <PartnerContentLink
      name="localization-management-translators-image"
      href="https://crowdin.com/page/freelance-translators"
    >
      <Screenshot
        src="/crowdin-editor-schematic.png"
        width={899}
        height={732}
        alt="Crowdin Editor"
      />
    </PartnerContentLink>
  </div>
  <figcaption>
    The Crowdin Editor enables translators to work with JSON files from
    `next-intl` (illustration).
  </figcaption>
</figure>

## Decouple localization from development

As a developer-focused localization service, Crowdin helps you to decouple the localization process from development and integrates with your existing workflows.

**Integration options:**

1. Git integration e.g. via the <PartnerContentLink name="localization-management-developers-integrations" href="https://support.crowdin.com/github-integration/">GitHub app</PartnerContentLink> or the <PartnerContentLink name="localization-management-developers-integrations" href="https://developer.crowdin.com/cli-tool/">Crowdin CLI</PartnerContentLink> (recommended)
2. Automatic workflows triggered from <PartnerContentLink name="localization-management-developers-integrations" href="https://developer.crowdin.com/api/v2/#tag/Webhooks">webhooks</PartnerContentLink>
3. Over-the-air delivery via the <PartnerContentLink name="localization-management-developers-integrations" href="https://developer.crowdin.com/sdk-ota-web/">JS SDK</PartnerContentLink>
4. Manual up- and download of messages (useful to get started)

<figure>
  <div className="max-w-2xl">
    <PartnerContentLink
      name="localization-management-developers-image"
      href="https://crowdin.com/teams/engineering"
    >
      <Image
        src="/crowdin-workflow.png"
        width={858}
        height={332}
        alt="Crowdin workflow"
        className="dark:contrast-75 dark:invert"
      />
    </PartnerContentLink>
  </div>
  <figcaption>
    <p>
      {'The '}
      <PartnerContentLink
        name="localization-management-developers-image-caption"
        href="https://support.crowdin.com/github-integration/"
      >
        {'Crowdin GitHub integration'}
      </PartnerContentLink>
      {' automatically creates pull requests when translations are updated.'}
    </p>
  </figcaption>
</figure>

<Callout>
  The [TypeScript integration of `next-intl`](/docs/workflows/typescript) can
  help you to validate at compile time that your app is in sync with your
  translation bundles.
</Callout>

You can further simplify the process for translators by setting up <PartnerContentLink name="localization-management-developers" href="https://developer.crowdin.com/in-context-localization/">Crowdin In-Context</PartnerContentLink>, allowing for the translation of messages directly from your app.

## Example workflow with the GitHub integration

For this example, we're going to use an example that is publicly available on GitHub: [Street Photography Viewer](https://github.com/amannn/street-photography-viewer). It's a Next.js app that displays street photography pictures from Unsplash and uses `next-intl` for all internationalization needs.

Once you have a GitHub repository with your app, you can follow these steps:

1. Install <PartnerContentLink name="localization-management-example" href="https://store.crowdin.com/github">the GitHub app from the Crowdin store</PartnerContentLink>
2. Follow <PartnerContentLink name="localization-management-example" href="https://support.crowdin.com/github-integration/">the setup guide for the GitHub integration</PartnerContentLink>

After this procedure, Crowdin will commit a configuration file to your repository based on your settings.

```yml filename="crowdin.yml"
files:
  - source: /messages/en.json
    translation: /messages/%locale%.json
```

This file provides the local translations in your repository to Crowdin.

<figure>
  <div className="max-w-2xl">
    <Screenshot
      src="/crowdin-repo-mapping.png"
      width={753}
      height={393}
      alt="Crowdin repository mapping"
    />
  </div>
  <figcaption>
    With the configuration file in place, Crowdin knows about the translation
    files in your repository.
  </figcaption>
</figure>

Now, as soon as a translation gets updated in Crowdin, the next sync will create a pull request in your repository with the updates.

<figure>
  <div className="max-w-2xl">
    <Screenshot
      src="/crowdin-repo-sync.png"
      width={805}
      height={371}
      alt="Crowdin repository sync"
    />
  </div>
  <figcaption>
    Automatic translation sync from Crowdin ([example pull
    request](https://github.com/amannn/street-photography-viewer/pull/3))
  </figcaption>
</figure>

→ Head over to <PartnerContentLink name="localization-management-example" href="https://crowdin.com/">Crowdin</PartnerContentLink> to learn more.
